<template>
  <div class="barEchartWrap h100">
    <loading-state :echartShowStatus="echartShowStatus" class="chartMain">
      <div ref="chartDom" style="height: 100%" v-show="echartShowStatus === 2"></div>
    </loading-state>
  </div>
</template>
<script>
import { barOption } from '../../config/chart'
import lodash from 'lodash'
import { mapState } from 'vuex'
import statisticsApi from '@/api/modules/statistics'
export default {
  components: {
  },
  props: {
    fingerKey: {
      type: String,
      required: true
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.statisticsOutline.queryParams
    }),
    chartTitle () {
      return this.fingerKeyConfig[this.fingerKey].title
    }
  },
  data () {
    return {
      option: lodash.cloneDeep(barOption),
      chart: null,
      echartShowStatus: -1,
      fingerKeyConfig: {
        // 升级车次数
        'sjccs': {
          getData: 'getUpgradeCarCountData',
          title: 'sjccs'
        },
        // 新建零件数
        'xjljs': {
          getData: 'getCreateEcuData',
          title: 'xjljs'
        },
        // 新建版本数
        'xjbbs': {
          getData: 'getCreateVersionData',
          title: 'newVersionCount'
        },
        // 新建任务数
        'xjrws': {
          getData: 'getCreateTaskData',
          title: 'newTaskCount'
        }
      }
    }
  },
  mounted () {
    this.initData()
  },
  watch: {
    queryParams: {
      handler () {
        this.initData()
      },
      deep: true
    }
  },
  methods: {
    initData () {
      const curFingerKey = this.fingerKeyConfig[this.fingerKey]
      if (curFingerKey) {
        this[curFingerKey.getData]()
      }
    },
    // 获取升级车次数
    getUpgradeCarCountData () {
      this.echartShowStatus = 1
      statisticsApi.getKeyIndicatorUpgradeVehicleCountData(this.queryParams).then((res) => {
        const { data } = res
        if (data) {
          this.option.xAxis.data = this.getXData(data.xdata)
          this.option.xAxis.axisLabel.interval = this.queryParams.timeType === 2 ? 3 : 0
          this.option.title.text = this.$t(this.fingerKeyConfig[this.fingerKey].title)
          this.option.series[0].data = data.ydata
          this.echartShowStatus = 2
          this.$nextTick(() => {
            this.initChartBox()
            this.setOption()
            this.bindEvent()
          })
        } else {
          // 无数据时
          this.echartShowStatus = 3
          this.$nextTick(() => {
            this.initChartBox()
            this.setOption()
          })
        }
      }, 500)
    },
    // 新建零件数量
    getCreateEcuData () {
      this.echartShowStatus = 1
      statisticsApi.getKeyIndicatorEcuCountData(this.queryParams).then(res => {
        const { data } = res
        if (data) {
          this.option.xAxis.data = this.getXData(data.xdata)
          this.option.xAxis.axisLabel.interval = this.queryParams.timeType === 2 ? 3 : 0
          this.option.title.text = this.$t(this.fingerKeyConfig[this.fingerKey].title)
          this.option.series[0].data = data.ydata
          this.echartShowStatus = 2
          this.$nextTick(() => {
            this.initChartBox()
            this.setOption()
            this.bindEvent()
          })
        } else {
          this.echartShowStatus = 3
          this.$nextTick(() => {
            this.initChartBox()
            this.setOption()
          })
        }
      })
    },
    // 新建版本数量
    getCreateVersionData () {
      this.echartShowStatus = 1
      statisticsApi.getKeyIndicatorVersionCountData(this.queryParams).then(res => {
        const { data } = res
        if (data) {
          this.option.xAxis.data = this.getXData(data.xdata)
          this.option.xAxis.axisLabel.interval = this.queryParams.timeType === 2 ? 3 : 0
          this.option.title.text = this.$t(this.fingerKeyConfig[this.fingerKey].title)
          this.option.series[0].data = data.ydata
          this.echartShowStatus = 2
          this.$nextTick(() => {
            this.initChartBox()
            this.setOption()
            this.bindEvent()
          })
        } else {
          this.echartShowStatus = 3
          this.$nextTick(() => {
            this.initChartBox()
            this.setOption()
          })
        }
      })
    },
    // 新建任务数量
    getCreateTaskData () {
      this.echartShowStatus = 1
      statisticsApi.getKeyIndicatorTaskCountData(this.queryParams).then(res => {
        const { data } = res
        if (data) {
          this.option.xAxis.data = this.getXData(data.xdata)
          this.option.xAxis.axisLabel.interval = this.queryParams.timeType === 2 ? 3 : 0
          this.option.title.text = this.$t(this.fingerKeyConfig[this.fingerKey].title)
          this.option.series[0].data = data.ydata
          this.echartShowStatus = 2
          this.$nextTick(() => {
            this.initChartBox()
            this.setOption()
            this.bindEvent()
          })
        } else {
          this.echartShowStatus = 3
          this.$nextTick(() => {
            this.initChartBox()
            this.setOption()
          })
        }
      })
    },
    initChartBox () {
      if (this.chart) {
        return
      }
      this.chart = this.$echarts.init(this.$refs.chartDom)
    },
    setOption () {
      if (!this.chart) {
        return
      }
      this.chart.setOption(this.option)
    },
    bindEvent () {
      window.addEventListener('resize', this.resizeChart)
    },
    resizeChart () {
      this.chart && this.chart.resize()
    },
    // 翻译x轴数据
    getXData (xData) {
      const type = this.queryParams.timeType
      let arr = []
      if (type === 1) {
        arr = xData.map(item => {
          return this.$t('month' + item)
        })
      } else if (type === 2) {
        arr = xData.map(item => {
          return this.$t('weekN').replace('N', item)
        })
      }
      return arr
    },
    // 摸拟数据
    getUpgradeMockData () {
      const type = this.queryParams.timeType
      const xData = []
      const yData = []
      let end
      if (type === 1) {
        end = 13
      } else if (type === 2) {
        end = 53
      }
      for (let i = 1; i < end; i = i + 1) {
        xData.push(i)
        yData.push(Math.ceil(10000 * (0.1 + Math.random())))
      }
      return {
        xData,
        yData
      }
    },
    getCreateEcuMockData () {
      const type = this.queryParams.timeType
      const xData = []
      const yData = []
      let end
      if (type === 'month') {
        end = 13
      } else if (type === 'week') {
        end = 53
      }
      for (let i = 1; i < end; i = i + 1) {
        xData.push(i)
        yData.push(Math.ceil(12 * (0.1 + Math.random())))
      }
      return {
        xData,
        yData
      }
    },
    getCreateVersionMockData () {
      const type = this.queryParams.timeType
      const xData = []
      const yData = []
      let end
      if (type === 'month') {
        end = 13
      } else if (type === 'week') {
        end = 53
      }
      for (let i = 1; i < end; i = i + 1) {
        xData.push(i)
        yData.push(Math.ceil(25 * (0.1 + Math.random())))
      }
      return {
        xData,
        yData
      }
    },
    getCreateTaskMockData () {
      const type = this.queryParams.timeType
      const xData = []
      const yData = []
      let end
      if (type === 'month') {
        end = 13
      } else if (type === 'week') {
        end = 53
      }
      for (let i = 1; i < end; i = i + 1) {
        xData.push(i)
        yData.push(Math.ceil(8 * (0.1 + Math.random())))
      }
      return {
        xData,
        yData
      }
    }
  },
  beforeDestroy () {
    const vm = this
    if (vm.chart) {
      window.removeEventListener('resize', vm.resizeChart)
    }
  }
}
</script>
<style lang="less" scoped>
.barEchartWrap {
  display: flex;
  flex-direction: column;
  .chartTitle {
    flex: none;
  }
  .chartMain {
    flex: 1 0 0;
  }
}
</style>
